<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .content {
      margin: 150px auto;
      width: 900px;
    }

  </style>
</head>
<body>
  <div id="app" class="content">
    <button v-on:click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{counter}} 次</p>
  </div>

  <div id="app2">
    <button v-on:click="greet">Greet</button>
  </div>

  <div id="app3">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
    <button v-on:click="warn('form cannot be submitted yet.', $event)">submit form</button>

    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>
    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>
  </div>


  <script src="../js/lib/vue.js"></script>
  <script src="../js/lib/art-template.js"></script>
  <script src="../js/lib/jquery-2.1.1.js"></script>
  <script>
    var data = {
      counter: 0
    }

    var app = new Vue({
      el: "#app",
      data: data
    });

    var app2 = new Vue({
      el: "#app2",
      data: {
        name: "vue.js"
      },
      methods: {
        greet: function(event) {
          alert("hello " + this.name + "!!!");
          alert(event.target.tagName);
        }
      }
    });

    var app2 = new Vue({
      el: "#app3",
      methods: {
        say: function(msg) {
          alert(msg);
        },
        warn: function(msg, event) {
          if(event) {
            event.preventDefault();
          }
          alert(msg);
        }
      }
    });
  </script>
</body>
</html>
